﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>运动员证件</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="HandheldFriendly" content="True">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/normalize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.carousel.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.theme.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.transitions.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/fakeLoader.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/style.css?r=10">

</head>
<body class="result">
	<!-- side nav left-->
	<div class="side-nav-panel-left">
		<ul id="slide-out-left" class="side-nav side-nav-panel collapsible">
			<li class="profil">
				<img src="${request.contextPath}/statics/img/profile.jpg" alt="">
				<h2>John Doe</h2>
			</li>
			<li class="li-top">
				<div class="collapsible-header active"><i class="fa fa-home"></i>Home <span><i class="fa fa-caret-down"></i></span></div>
				<div class="collapsible-body">
					<ul class="side-nav-panel">
						<li><a href="index.html">Home Default</a></li>
						<li><a href="home-business.html">Home Business</a></li>
						<li><a href="home-portfolio.html">Home Portfolio</a></li>
						<li><a href="home-shop.html">Home Shop</a></li>
						<li><a href="home-blog.html">Home Blog</a></li>
					</ul>
				</div>
			</li>
			<li>
				<div class="collapsible-header"><i class="fa fa-shopping-cart"></i>Shop <span><i class="fa fa-caret-down"></i></span></div>
				<div class="collapsible-body">
					<ul class="side-nav-panel">
						<li><a href="home-shop.html">Shop</a></li>
						<li><a href="shop-single.html">Shop Single</a></li>
						<li><a href="checkout.html">Checkout</a></li>
					</ul>
				</div>
			</li>
			<li>
				<div class="collapsible-header"><i class="fa fa-file-o"></i>Pages <span><i class="fa fa-caret-down"></i></span></div>
				<div class="collapsible-body">
					<ul class="side-nav-panel">
						<li><a href="pricing.html">Pricing</a></li>
						<li><a href="error404.html">404</a></li>
						<li><a href="team.html">Team</a></li>
						<li><a href="testimonial.html">Testimonial</a></li>
					</ul>
				</div>
			</li>
			<li>
				<div class="collapsible-header"><i class="fa fa-bold"></i>Blog <span><i class="fa fa-caret-down"></i></span></div>
				<div class="collapsible-body">
					<ul class="side-nav-panel">
						<li><a href="home-blog.html">Blog Slider</a></li>
						<li><a href="blog.html">Blog</a></li>
						<li><a href="blog-single.html">Blog Single</a></li>
					</ul>
				</div>
			</li>
			<li><a href="about-us.html"><i class="fa fa-user"></i>About Us</a></li>
			<li><a href="contact.html"><i class="fa fa-envelope-o"></i>Contact Us</a></li>
			<li><a href="login.html"><i class="fa fa-sign-in"></i>Login</a></li>
			<li><a href="register.html"><i class="fa fa-user-plus"></i>Register</a></li>
		</ul>
	</div>
	<!-- end side nav left-->


	<!-- register -->
	<div id="rrapp" class="section">
		<div class="container">
			<div class="result-head">
				<div class="result-title">
					运动员证件信息
				</div>
				<div class="result-base">
					<div class="result-head-img" v-if="!dataForm.img">
						<img src="${request.contextPath}/statics/img/head-t.png" />
					</div>

					<div class="register-btns">
						<p class="result-row"><span class="result-label">学生姓名</span> <span class="result-val">{{dataForm.username}}</span></p>
						<p class="result-row"><span class="result-label">身份证号</span> <span class="result-val">{{dataForm.idCard}}</span></p>
						<p class="result-row"><span class="result-label">有效期</span> <span class="result-val">{{dataForm.expirationDateStr}}</span></p>

					</div>
				</div>
			</div>
			<!--三个按钮-->
			<div style="margin-top: 20px;">
				<a href="javascript:void(0);" class="btn btn-1" @click="queryInfo(1)">考级信息</a>
				<a href="javascript:void(0);" class="btn btn-2" @click="queryInfo(2)">成绩信息</a>
			</div>

			<!--赛事考级信息公示-->
			<div class="result-gs">
				<div class="result-title">
					{{tabTitle}}信息公示
				</div>
				<div v-if="tab == 1">
					<div class="result-content" v-for="(item,index) in dataForm.certList">
						<span class="result-score">{{item.classifyName}}(成绩)</span>  <div class="result-hege">合格</div>
					</div>
				</div>
				<div v-if="tab == 2">
					<div class="result-content" v-for="(item,index) in dataForm.scoreList">
						<span class="result-score">{{item.competitionName}}(成绩)</span>  <div class="result-hege">合格</div>
					</div>
				</div>

			</div>

			<div style="background-color: #fff; border-radius: 5px; margin-top: 20px;">
				<div class="about-us-foot" style="color: #909399; text-align: left; padding: 10px 15px;">
					<p>温馨提示： </p>
					<p>如果输入信息正确，对应的信息将会在这个页面列出；</p>
				</div>
			</div>

		</div>
	</div>
	<!-- end register -->

	<!-- scripts -->
	<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
	<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
	<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
	<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
	<script src="${request.contextPath}/statics/js/main.js"></script>
	<script src="${request.contextPath}/statics/js/vue.min.js"></script>

	<script>
		var vm = new Vue({
			el: '#rrapp',
			data: {
				dataForm: {
					id: '',
					img: '',
					username: '',
					idCard: '',
					expirationDateStr: '',
					scoreList:[],
					certList: []
				},
				tab: 1,
				tabTitle: '考级信息',
			},
			mounted: function () {
				// 获取url上的id参数
				// this.dataForm.id = this.getUrlParams(window.location.href).id;
				// this.queryAthlete();
			},
			created: function () {
				// 获取url上的id参数
				this.dataForm.id = this.getUrlParams(window.location.href).id;
				this.queryAthlete();
			},
			methods:{
				getUrlParams(url) {
					const reg = /(\w+)=([^&]+)/g;
					const params = {};
					let match;

					while ((match = reg.exec(url)) !== null) {
						params[match[1]] = match[2];
					}

					return params;
				},
				//运动员证查询
				queryAthlete(){
					that = this;
					$.ajax({
						type: 'get',
						url: '${request.contextPath}/h5/queryAthleteById',
						data: this.dataForm,
						success: function (res) {
							if(res.code === 0){
								that.dataForm = res.data;
							}else{
								alert(res.msg);
							}
						},
					});
				},
				queryInfo(id){
					this.tab = id;
					if(id==1){
						this.tabTitle = '考级信息';
					}
					if(id==2){
						this.tabTitle = '成绩信息';
					}
				}

			}

		});
	</script>


</body>
</html>

